<template>
  <BasicDrawer :width="800" @register="registerDrawer">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">添加</a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              icon: 'ant-design:edit-outlined',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              icon: 'ic:outline-delete-outline',
              onClick: handleDelete.bind(null, record),
            },
          ]"
        />
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'status'">
          {{ record.status === 1 ? '启用' : '禁用' }}
        </template>
      </template>
    </BasicTable>
  </BasicDrawer>
  <DictItemModal :baseDictId="baseDictId" :baseDictCode="baseDictCode" @register="registerModal" @success="reload" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { message, Modal } from 'ant-design-vue';
  import { getDictItemList, deleteDictItemById } from '/@/api/base';
  import { dictItemSearchFormSchema, dictItemColumns } from '../dict.data';
  import DictItemModal from './DictItemModal.vue';
  import { useModal } from '/@/components/Modal';

  const baseDictId = ref<number>();
  const baseDictCode = ref<string>();

  const [registerTable, { reload }] = useTable({
    title: '字典项列表',
    api: getDictItemList,
    rowKey: 'id',
    columns: dictItemColumns,
    showIndexColumn: true,
    tableSetting: {
      cacheKey: 'dict_item_list',
    },
    formConfig: {
      labelWidth: 50,
      schemas: dictItemSearchFormSchema,
      autoSubmitOnEnter: true,
    },
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    immediate: false,
    beforeFetch({ pageIndex, pageSize, ...model }) {
      return {
        pageIndex,
        pageSize,
        model: {
          ...model,
          baseDictId: baseDictId.value,
        },
      };
    },
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const [registerDrawer] = useDrawerInner((data) => {
    baseDictId.value = data.record.id;
    baseDictCode.value = data.record.code;
    reload();
  });

  const [registerModal, { openModal }] = useModal();

  const handleCreate = () => {
    openModal(true, {
      isUpdate: false,
    });
  };

  const handleEdit = (record: Recordable) => {
    openModal(true, {
      record: record,
      isUpdate: true,
    });
  };

  const handleDelete = (record: Recordable) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除所选字典项吗?',
      onOk: async () => {
        await deleteDictItemById(record.id);
        message.success('删除字典项信息成功！');
        reload();
      },
    });
  };
</script>
